import React, { useEffect, useState } from 'react'
import api from '../../api/axios'
import styles from './home.module.css'
import { FlagOutline, BellOutline } from 'antd-mobile-icons'
import { Avatar, SearchBar } from 'antd-mobile'
import { Image, List } from 'antd-mobile'
import { HeartFill } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
function Home() {
  const Navigate = useNavigate()
  const [list, setList] = useState([])
  const [searhaner, setSearhaner] = useState([])
  const getData = async () => {
    const res = await api.get('/api/list')
    const { code, data } = res.data
    console.log(data)
    if (code == 200) {
      setList([...list, ...data])
    }
  }
  useEffect(() => {
    getData()
  }, [])
  const dian = (item) => {
    Navigate('/detail', { state: item })
  }
  //搜索
  const searHander = async (value) => {
    if (value != '') {
      const res = await api.get('/api/city/search', {
        params: {
          wd: value
        }
      })
      const { code, data } = res.data
      console.log(res)
      if (code == 200) {
        setSearhaner(data)
      }
    }else{
      setSearhaner([])
    }
  }
  const [heart, setHeart] = useState(JSON.parse(localStorage.getItem('heart')) || [])
  const xin = (item) => {
    let xin = heart.some((it) => it.id == item.id)
    if (xin) {
      let shou = heart.filter((it) => it.id !== item.id)
      setHeart(shou)
      localStorage.setItem('heart', JSON.stringify([...heart, item]))
    }
    else {
      setHeart([...heart, item])
      localStorage.setItem('heart', JSON.stringify([...heart, item]))
    }
  }
  return (
    <div>
      
      <div className={styles.box_css}>
        <div className={styles.ding_css}>
          <FlagOutline style={{ fontSize: '20px', marginRight: '5px' }} /><span>订票服务</span>
          <div className={styles.dian_css}></div>
          <span><BellOutline style={{ fontSize: '20px', position: 'fixed', left: '260px', top: '20px' }} /></span>
        </div>
        <div className={styles.icon_css}>
          <Avatar size='10px' src={localStorage.getItem('avatar')} />
        </div>
        <br />
        <span style={{ color: '#fff', fontSize: '18px', padding: '24px' }}>大家可以随时随地发现精彩活动就在你身边。</span>
        <div>
          <SearchBar
            placeholder='输入关键字'
            showCancelButton
            onChange={searHander}
            style={{
              width: '330px',
              marginLeft: '20px',
              marginTop: '18px',
              '--border-radius': '100px',
              '--background': '#ffffff',
              '--height': '45px',
              '--padding-left': '12px',
            }}
          />
          {/* <div>
            <List>
              {
                searhaner.length > 0 && searhaner.map((item, ind) => {
                  return <List.Item key={ind}>
                    {item.name}
                  </List.Item>
                })
              }
            </List>
          </div> */}
          <div className={styles.mei_box}>
            <span>现场音乐会</span>
            <span>艺术展览</span>
            <span>专业研讨会</span>
            <span>体育团体竞争</span>
          </div>
        </div>
      </div>
      <div>
      </div>
      <div>
        <h3 style={{ padding: '15px 20px' }}>最新活动</h3>
        <div style={{ width: '100%', height: '200px', }}>
          <div style={{ overflowX: 'scroll', display: 'flex' }}>
            {
              list.length > 0 && list.map((item, ind) => (
                <div style={{ background: 'rgba(218, 228, 228, 1)', marginLeft: '20px', borderRadius: '8px' }} key={ind} onClick={() => dian(item)}>

                  <div>
                    <HeartFill onClick={() => xin(item)} color={heart.some((it) => it.id == item.id) ? 'red' : '#ccc'} style={{ marginLeft: '150px', marginTop: '30px', fontSize: '18px' }} />
                    <img style={{ width: '200px', height: '200px' }} src={item.image} />
                  </div>
                  <div style={{ padding: '20px,15px' }}>

                    <p style={{ marginLeft: '10px' }}>{item.title}</p>
                    <div className={styles.bu_css}>
                      <img style={{ width: '30px', height: '30px', marginTop: '10px', marginLeft: '10px' }} src={item.image} />
                      <p style={{ marginLeft: '10px', marginTop: '10px' }}>Koto</p>
                    </div>
                    <div style={{ width: '100%', border: 'solid 1px #ccc', marginTop: '10px' }}></div>
                    <div className={styles.can_css}>
                      <span>128 参与者</span>
                      <p style={{ marginTop: '10px' }}>{item.date}</p>
                    </div>
                  </div>
                </div>
              ))
            }
          </div>
        </div>
      </div>
    </div>
  )
}

export default Home
